/* 作者： 开发日期： 页面描述：工作通知-查看详情 修改人员：**** 修改日期：**** */
<template>
  <div class="page_padding">
    <MyNavBar @goback="goback" :title="title" />
    <div class="work_detail">
      <div class="work_detail_tips">
        <div class="work_detail_li">
          <div class="work_detail_li1">
            <span class="work_detail_name">信息分类</span>
            <span class="work_detail_val" v-if="notice.type == '0'">工作通知</span>
            <span class="work_detail_val" v-if="notice.type == '3'">工作简报</span>
            <span class="work_detail_val" v-if="notice.type == '4'">制度文件</span>
          </div>
          <div class="work_detail_li1">
            <span class="work_detail_name">发布机构</span>
            <span class="work_detail_val" :title="notice.releaseOrgName">{{ notice.releaseOrgName }}</span>
          </div>
        </div>
        <div class="work_detail_li">
          <div class="work_detail_li1">
            <div class="work_detail_name">发布人</div>
            <div class="work_detail_val" :title="notice.bulletinAuthor">{{ notice.bulletinAuthor }}</div>
          </div>
          <div class="work_detail_li1">
            <div class="work_detail_name">来源</div>
            <div class="work_detail_val" :title="notice.source">{{ notice.source }}</div>
          </div>
        </div>
      </div>
      <div class="work_detail_content">
        <p class="work_detail_content_title">{{ notice.bulletinTitle }}</p>
        <div class="work_detail_content_tips">
          <div class="infor_item">
            <span class="label_item">发布时间：</span>
            {{ notice.releaseDateH }}
          </div>
          <div class="infor_item">
            <span class="label_item">阅读次数：</span>
            {{ notice.readCount }}
          </div>
        </div>
        <div
          class="work_detail_main"
          :class="[{ detail_assess: notice.source == '考核通知' }]"
          v-html="notice.bulletinContent"></div>
        <div class="work_detail_file" v-if="notice.fileShowVOS.length > 0">
          <ImgUpload :albumList="notice.fileShowVOS" v-if="notice.fileShowVOS.length > 0" :entry="false" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MyNavBar from '@com/MyNavBar'
import ImgUpload from '@com/ImgUpload'
import { getWorksDetail } from '@api/api.js'
export default {
  components: {
    MyNavBar,
    ImgUpload,
  },
  data() {
    return {
      title: '详情',
      notice: {
        id: '',
        fileShowVOS: [],
      },
    }
  },
  created() {},
  mounted() {
    this.getWorksDetail()
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    //获取详情
    getWorksDetail() {
      getWorksDetail({
        bulletionId: this.$route.query.bulletionId,
      }).then(res => {
        if (res.status == 200) {
          let data = res.data
          if (data.fileShowVOS && data.fileShowVOS.length > 0) {
            for (let i = 0; i < data.fileShowVOS.length; i++) {
              let item = data.fileShowVOS[i]
              let fileInfoArr = item.sourcePath.split('.')
              item.fileType = fileInfoArr[fileInfoArr.length - 1].split('?')[0]
            }
          }
          this.notice = data
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.work_detail {
  padding: 8px 12px;
  overflow-x: hidden;
  .work_detail_tips {
    font-size: 12px;
    color: #333333;
    border: 1px solid #dcdfe6;
    margin: 8px 0;
    .work_detail_li {
      display: flex;
      flex-direction: row;
      min-height: 25px;
      &:not(:last-child) {
        border-bottom: 1px solid #dcdfe6;
      }
    }
    .work_detail_li1 {
      display: flex;
      align-items: center;
      width: 50%;
      &:first-child {
        border-right: 1px solid #dcdfe6;
      }
    }
    .work_detail_name {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 45%;
      height: 100%;
      border-right: 1px solid #dcdfe6;
      background-color: #f9f9f9;
    }
    .work_detail_val {
      width: 55%;
      line-height: 15px;
      padding: 3px;
      color: #6c757d;
      background-color: #ffffff;
      text-align: center;
    }
  }
  .work_detail_content {
    margin: 10px 0;
    .work_detail_content_title {
      line-height: 20px;
      text-align: center;
      font-weight: bold;
      font-size: 16px;
      color: #333333;
      margin: 12px 0;
    }
    .work_detail_content_tips {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin: 8px 0 0;
      font-size: 12px;
      color: #6c757d;
      .infor_item {
        margin-bottom: 5px;
        .label_item {
          max-width: 50%;
        }
      }
    }
    .work_detail_main {
      font-size: 13px;
      line-height: 20px;
      word-break: break-all;
      white-space: pre-line;
      margin-top: 16px;
      /deep/img {
        max-width: 100%;
      }
    }
    .work_detail_file {
      padding: 8px 0;
      font-size: 13px;
      color: #4a79ba;
      div {
        padding-bottom: 8px;
      }
      .work_detail_file_span {
        cursor: pointer;
      }
    }
  }
}
// 考核通知公文特殊处理
/deep/.detail_assess {
  white-space: normal !important;
  p {
    line-height: 20px !important;
    font-size: 12px !important;
    span {
      font-size: 12px !important;
    }
  }
  .red_title {
    transform: scale(1, 1) !important;
    span {
      font-size: 25px !important;
      line-height: 25px !important;
    }
  }
  .from_title {
    margin-top: 0 !important;
  }
  .vice_title {
    span {
      font-size: 16px !important;
      line-height: 20px !important;
    }
  }
  .main_text {
    text-indent: 16px !important;
  }
  .main_text-title {
    margin-top: 10px;
    text-indent: 0 !important;
  }
  .main_text-contact {
    span:first-child {
      letter-spacing: 4px !important;
      text-align: justify;
    }
  }
  .main_text-phone {
    span:first-child {
      letter-spacing: 0 !important;
      text-align: justify;
    }
  }
  .main_text-end {
    span {
      margin-right: 75px !important;
    }
  }
}
</style>
